<template>
  <div>
    <!--日历-->
    <div class="calendar">
      <div class="row" v-for="(row,index) in yearCalendar" :key="index">
        <div class="month" v-for="monthItem in row" :key="monthItem" >
          <div class="month-label">{{monthItem}} 月</div>
          <div class="schedule " @click="turnMonth(monthItem)">
            <year-calendar :viewType="viewType" :currentDate="currentDateMonth(monthItem)"/>
          </div>
        </div>
      </div>
    </div>



  </div>
</template>

<script>
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import 'moment/locale/zh-cn';
  import scheduleList from '../mock/schedule'
  import YearCalendar from "./components/YearCalendar";
  import moment from "moment";
  export default {
    name: "year",
    components:{
      YearCalendar
    },
    props: {
      viewType: String,
      currentDate: Date,
    },
    data(){
      return{
        locale,
        visible:false,
        detailVisible:false,
        content:"",
        group:0,
        beginTime:'00:00',
        endTime:moment(new Date()).format('HH:mm'),
        editId:null,

        scheduleList,
        scheduleTheme: 'blue,grayGreen,orange,red,purple,fuchsia'.split(','),
        nowYear:new Date().getFullYear(),
        yearCalendar:[
          [1,2,3,4],
          [5,6,7,8],
          [9,10,11,12]
        ]
      }
    },
    computed:{
      selectYear(){
        return new Date(this.currentDate).getFullYear();
      },
      nowYearSchedule(){
       const arr = this.scheduleList.filter(item=>{return new Date(item.beginDate).getFullYear() === this.selectYear })
        return arr;
      },
      isNowYear(){
        let bool = false;
        if(this.nowYear === this.selectYear){bool = true;}
        return bool;
      }
    },
    methods: {
      scheduleData(month){
       const arr = this.nowYearSchedule.filter(item=>{return new Date(item.beginDate).getMonth()+1===month});
       return arr;
      },
      currentDateMonth(month){
        return new Date(new Date(this.currentDate).setMonth(month-1));
      },
      turnMonth(month){
        this.$emit("turnMonth",month)
      }
    },
  }
</script>
<style scoped lang="less">
  @import "../tools/scheduleTheme";
  @import "../tools/scrollbar";
  .borderT1{
    border:1px solid red;
  }
  .calendar{
    width: 100%;
    height: calc(100vh - 70px);
    overflow: auto;
    .row{
      height: 33.3%;
      width: 100%;
      display: flex;
      .month{
        padding: 0 10px;
        width: 25%;
        .month-label{
          width: 100%;
          height: 30px;
          padding:0px 20px;
          color:#000;
          font-size: 20px;
        }
        .schedule{

          height: calc(100% - 30px);
          width: 100%;
          overflow: auto;
        }
      }
    }
  }
</style>